<template>
  <div class="a">
    <div class="b">
      <img  class="b-1" src="/static/1.png">
      <div class="b-2">
        <span>设置</span>
      </div>
    </div>

    <div class="c">
      <div class="c-1">
        <span>手机号</span>
      </div>
      <div class="c-2">
        <span>188****8766</span>
        <img  class="c-3" src="/static/2.png">
      </div>
    </div>

    <div class="d">
      <div class="d-1">
        <span>微博</span>
      </div>
      <div class="d-2">
        <span>Alex</span>
        <img  class="d-3" src="/static/2.png">
      </div>
    </div>

    <div class="e">
      <div class="e-1">
        <span>微信</span>
      </div>
      <div class="e-2">
        <span>未绑定</span>
        <img  class="e-3" src="/static/2.png">
      </div>
    </div>

    <div class="f">
      <div class="f-1">
        <span>QQ</span>
      </div>
      <div class="f-2">
        <span>未绑定</span>
        <img  class="f-3" src="/static/2.png">
      </div>
    </div>

    <div class="g">
      <div class="g-1">
        <span>系统通知</span>
      </div>
      <div class="g-2">
        <el-switch v-model="value" active-color="blue" inactive-color="grey"></el-switch>
      </div>
    </div>

    <div class="h">
      <div class="h-1">
        <span>检查新版本</span>
      </div>
      <div class="h-2">
        <img  class="h-3" src="/static/2.png">
      </div>
    </div>

    <div class="i">
      <div class="i-1">
        <span>清除缓存</span>
      </div>
      <div class="i-2">
        <span>207M</span>
      </div>
    </div>

    <div class="j">
      <div class="j-1">
        <span>退出账号</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: true
    }
  }
}
</script>

<style>
  .a{
    width: 468px;
    height: 792px;
  }
  .b{
    width: 468px;
    height: 54px;
  }
  .b-1{
    width: 26px;
    height: 27px;
    float: left;
    margin-top: 12px;
    margin-left:10px;
  }
  .b-2{
    width: 50px;
    height: 27px;
    float:right;
    margin-right: 200px;
    margin-top: 12px;
    font-size: 20px;
  }
  .c{
    width: 468px;
    height: 50px;
    border-top: 10px solid rgb(207, 207, 207);
    border-bottom: 1px solid rgb(207, 207, 207);
  }
  .c-1{
    float: left;
    margin-top: 12px;
    margin-left:13px;
  }
  .c-2{
    float:right;
    margin-top: 15px;
    margin-right:20px;
  }
  .c-3{
    width: 15px;
    height: 16px;
    float: right;
    margin-top: 1px;
    margin-left:10px;
  }
  .d{
    width: 468px;
    height: 50px;
    border-bottom: 1px solid rgb(207, 207, 207);
  }
  .d-1{
    float: left;
    margin-top: 13px;
    margin-left:13px;
  }
  .d-2{
    float:right;
    margin-top: 15px;
    margin-right:20px;
    color: rgb(188, 197, 204);
  }
  .d-3{
    width: 15px;
    height: 16px;
    float: right;
    margin-top: 1px;
    margin-left:10px;
  }

  .e{
    width: 468px;
    height: 50px;
    border-bottom: 1px solid rgb(207, 207, 207);
  }
  .e-1{
    float: left;
    margin-top: 13px;
    margin-left:13px;
  }
  .e-2{
    float:right;
    margin-top: 15px;
    margin-right:20px;
  }
  .e-3{
    width: 15px;
    height: 16px;
    float: right;
    margin-top: 1px;
    margin-left:10px;
  }

  .f{
    width: 468px;
    height: 50px;
    border-bottom: 10px solid rgb(207, 207, 207);
  }
  .f-1{
    float: left;
    margin-top: 13px;
    margin-left:13px;
  }
  .f-2{
    float:right;
    margin-top: 15px;
    margin-right:20px;
  }
  .f-3{
    width: 15px;
    height: 16px;
    float: right;
    margin-top: 1px;
    margin-left:10px;
  }

  .g{
    width: 468px;
    height: 50px;
    border-bottom: 1px solid rgb(207, 207, 207);
  }
  .g-1{
    float: left;
    margin-top: 13px;
    margin-left:13px;
  }
  .g-2{
    float:right;
    margin-top: 15px;
    margin-right:20px;
  }

  .h{
    width: 468px;
    height: 50px;
    border-bottom: 1px solid rgb(207, 207, 207);
  }
  .h-1{
    float: left;
    margin-top: 13px;
    margin-left:13px;
  }
  .h-2{
    float:right;
    margin-top: 15px;
    margin-right:20px;
  }
  .h-3{
    width: 15px;
    height: 16px;
    float: right;
    margin-top: 1px;
    margin-left:10px;
  }

  .i{
    width: 468px;
    height: 50px;
    border-bottom: 10px solid rgb(207, 207, 207);
  }
  .i-1{
    float: left;
    margin-top: 13px;
    margin-left:13px;
  }
  .i-2{
    float:right;
    margin-top: 15px;
    margin-right:20px;
  }

  .j{
    width: 468px;
    height: 50px;
    border-bottom: 1px solid rgb(207, 207, 207);
  }
  .j-1{
    float: left;
    margin-top: 13px;
    margin-left:13px;
    color: red;
  }
</style>
